<template>
  <div class="article-main">
    <el-card shadow="never" class="card">
      <!-- 模糊搜索 -->
      <div slot="header">
      <el-row :gutter="20">
        <el-form label-width="80px" :model="searchFrom" size="mini">
          <el-col :span="6" :offset="0">
            <el-form-item label="作者">
              <el-input v-model="searchFrom.author"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="标题">
              <el-input v-model="searchFrom.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-button type="primary" size="mini" @click="isSubmit"
              >查询</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      </div>
      <!-- 新增文章列表 -->
      <el-button type="primary" size="mini" @click="goAddText">新增文章</el-button>
      <!-- 文章列表 table -->
      <el-table
        v-loading="listLoading"
        :data="articleList"
        border
        style="width: 100%"
      >
      
        <el-table-column type="index" width="50" fixed="left" align="center" />
        <el-table-column prop="title" label="标题" align="center" width="200" />
        <el-table-column
          prop="author"
          label="作者"
          align="center"
          width="200"
        />
        <el-table-column
          prop="editorType"
          label="编辑类型"
          align="center"
          width="200"
        />
        <!-- 显示文章图片 -->
        <el-table-column label="图片" align="center" width="200">
          <template slot-scope="scope">
            <img class="list_img" :src="scope.row.coverImg" alt="" />
          </template>
        </el-table-column>
        <!-- 是否展示 -->
        <el-table-column label="是否展示" align="center" width="200">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isShow"
              :inactive-value="0"
              :active-value="1"
              @change="isChange(scope.row)"
            />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import articleApi from '@/api/content/article'
import mixin from '@/mixins'
export default {
  name: 'Aticle',
  mixins: [mixin],
  data() {
    return {
      listLoading: false, // 文章列表加载动画
      articleList: [], // 文章数据数组
      searchFrom: {} //查询对象
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取文章列表api
    getList() {
      this.listLoading = true
      articleApi
        .getArticleList(this.page.currentPage, this.page.size, this.searchFrom)
        .then((res) => {
          if (res.success) {
            this.articleList = res.data.rows
            console.log(res)
            // 声明多少条数据
            this.page.total = res.data.total
          } else {
            this.$message.error('请求失败')
          }
          this.listLoading = false
        })
    },
    //前往新增文章
    goAddText(){
        name: 'AddText',
      this.$router.push({name:"AddText"})
    },
    // 编辑
    edit(row) {
      // console.log(row)
      this.$router.push({name:'EditText',params:{id:row.id}})
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        articleApi.delArticle(row.id).then((res) => {
          if (res.success) {
            // 删除成功以后再刷新 table
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      })
    },
    //改变是否显示的状态
    isChange(row) {
      //判断是否已改变
      var temIsShow = row.isShow == 0 ? 1 : 0
      articleApi
        .changeShowStatus({
          id: row.id,
          isShow: row.isShow
        })
        .then((res) => {
          if (res.success) {
            this.$message.success('显示状态改变成功')
          } else {
            this.$message.error('修改失败')
            row.isShow = temIsShow
          }
        })
    },
    isSubmit() {
      this.page.currentPage = 1
      this.getList()
    },
    // size改变的时候触发的钩子函数
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 点击页数的时候触发的钩子函数
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }
  }
}
</script>



<style scoped lang="scss">
@import '@/styles/myScss';
.article-main {
  .list_img {
    width: 150px;
    height: 150px;
  }
}
</style>